<template>
  <div>
<van-swipe :autoplay="3000" class="lubo">
  <van-swipe-item v-for="item in Lunbolist" :key="item.img">
      <img :src="item.img" alt="">
  </van-swipe-item>
</van-swipe>
<!-- <section class="van-doc-demo-block demo-icon">
<router-link class="van-col van-col--8" to="/Newslist" tag="div"><i class="van-icon van-icon-new"></i><span>new</span></router-link>
<div class="van-col van-col--8"><i class="van-icon van-icon-hot-sale"></i><span>hot-sale</span></div>
<div class="van-col van-col--8"><i class="van-icon van-icon-like-o"></i><span>like</span></div>
<div class="van-col van-col--8"><i class="van-icon van-icon-close"></i><span>close</span></div>
<div class="van-col van-col--8"><i class="van-icon van-icon-close"></i><span>close</span></div>
<div class="van-col van-col--8"><i class="van-icon van-icon-close"></i><span>close</span></div>
<div class="van-col van-col--8"><i class="van-icon van-icon-close"></i><span>close</span></div>
<div class="van-col van-col--8"><i class="van-icon van-icon-close"></i><span>close</span></div>
<div class="van-col van-col--8"><i class="van-icon van-icon-close"></i><span>close</span></div>
</section> -->
<Gird></Gird>
  </div>
</template>

<script>
import { Toast } from 'vant';

// Vue.use(Toast);
import Gird from '../subcomponents/Gird'

export default {
  name:'',
  data(){
   return {
       Lunbolist:[]
   }
  },
  created(){
      this.getLunbo()
  },
  methods:{
      getLunbo(){
          this.$http.get("http://localhost:5000/api/getlunbo").then(res => {
              const {status,message} = res.body
              if(status === 0) {
                  this.Lunbolist = message;
                  Toast("获取新闻成功")
              }else {
                  Toast('请求失败');
              } 
          })
      }
  },
  components:{
      Gird
  }
}
</script>

<style lang="less" scoped>
.lubo{
    height: 200px;
}
.lubo img {
    width: 100%;
    height: 100%;
}

.demo-swipe {
//  height: 200px;
//   padding-bottom: 30px;
}
.demo-swipe .van-swipe {
    cursor: pointer;
}
.demo-swipe .van-swipe-item {
      color: #fff;
      font-size: 20px;
      text-align: center;
    //   line-height: 150px
}
.demo-swipe .van-swipe-item:nth-child(even) {
  background-color: #39a9ed;
}
.demo-swipe .van-swipe-item:nth-child(odd) {
  background-color: #66c6f2;
}
.demo-swipe .van-swipe img {
      width: 100%;
      height: 100%;
      display: block;
    //   padding: 30px 60px;
      box-sizing: border-box;
      background-color: #fff;
      pointer-events: none;
}
.demo-swipe--vertical {
    // height: 200px;
}
.demo-swipe--vertical .van-swipe-item {
    //   line-height: 200px;
}


// .demo-icon {
//   font-size: 0;
// }
// .demo-icon .van-col {
//     text-align: center;
//     height: 100px;
//     float: none;
//     display: inline-block;
//     vertical-align: middle;
// }
// .demo-icon .van-icon {
//     display: block;
//     font-size: 32px;
//     margin: 15px 0;
//     color: orange;
// }
// .demo-icon span {
//     font-size: 14px;
// }


</style>
